<template>
  <div class="flex container">
    <!-- navbar -->
    <nav-bar class="nav-bar">
      <p slot="center">订单列表</p>
    </nav-bar>

    <!-- 未登录 -->
    <div class="logouting flex center">
      <img src="~assets/images/order/person.png" alt="" />
      <p>登录后查看外卖订单</p>
      <div>立即登录</div>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar.vue";
export default {
  components: { NavBar },
  name: "Order",
};
</script>
<style lang="less" scoped>
.container {
  flex-direction: column;
  height: calc(100vh - 54px);
}
.nav-bar {
  background: var(--color-green);
  color: white;
  font-size: 20px;
}
.logouting {
  flex-direction: column;
  flex: 1;
  img {
    width: 200px;
  }
  p {
    margin: 10px 0;
    color: #75828e;
  }
  div {
    color: #fff;
    padding: 15px 20px;
    border-radius: 5%;
    background: var(--color-green);
  }
}
</style>